<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/commons.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="header">
        <div class="head-top">
            <div class="w">
                <div class="head-top-left">
                    <ul>
                        <li><a href="#">华为官网</a></li>
                        <li><a href="#">荣耀官网</a></li>
                        <li class="down-icon"><a href="#">软件应用</a></li>
                        <li><a href="#">花粉俱乐部</a></li>
                        <li><a href="#">Select Region</a></li>
                    </ul>
                </div>
                <div class="head-top-right">
                    <ul>
                        <li><a href="#">登录</a> <a href="#">注册</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">V码(优购码)</a></li>
                        <li><a href="#">手机版</a></li>
                        <li><a href="#" class="down-icon">网站导航</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="head-content w">
            <div class="head-content-left">
                <img src="./images/logo.huawei.png" alt="">
                <div class="home">商城首页</div>
            </div>
            <div class="head-content-right">
                <img src="./images/qrcode_vmall_app01.png" alt="">
                <div>微信扫码关注我们</div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="nav">
            <div class="w">
                <ul class="nav-head">
                    <li>
                        <dl>
                            <dt>全部商品</dt>
                            <dd>
                                <a href="#">
                                    <div class="goods">
                                        手机
                                    </div>
                                    <p>HUAWEI Mate系列</p>
                                </a>
                            </dd>
                            <dd>
                                <a href="#">
                                    <div class="goods">
                                        平板&穿戴
                                    </div>
                                    <p>平板电脑 手环/手表</p>
                                </a>
                            </dd>
                            <dd>
                                <a href="#">
                                    <div class="goods">
                                        笔记本电脑
                                    </div>
                                    
                                </a>
                            </dd>
                            <dd>
                                <a href="#">
                                    <div class="goods">
                                        智能家具
                                    </div>
                                    <p>子母路由 电力猫 路由器</p>
                                </a>
                            </dd>
                            <dd>
                                <a href="#">
                                    <div class="goods">
                                        专属配件
                                    </div>
                                    <p>贴膜 保护壳 保护套</p>
                                </a>
                            </dd>
                            <dd>
                                <a href="#">
                                    <div class="goods">
                                        通用配件
                                    </div>
                                    <p>耳机 音响</p>
                                </a>
                            </dd>
                            
                        </dl>
                    </li>
                    <li>华为专区</li>
                    <li>HUAWEI P10</li>
                    <li>HUAWEI Mate9</li>
                    <li>HUAWEI Nova</li>
                    <li>华为畅享6s</li>
                    <li>荣耀专区</li>
                </ul>
            </div>
        </div>
        <div class="banner">
            <div class="w banner-main">
                <!-- <img src="./images/bg.jpg" alt=""> -->
                <ol>
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                </ol>
            </div>
        </div>
        <div class="good-list">
            <div class="good-top w">
                <a href="#"><img src="./images/good1.jpg" alt=""></a>
                <a href="#"><img src="./images/good2.jpg" alt=""></a>
                <a href="#"><img src="./images/good3.jpg" alt=""></a>
                <a href="#"><img src="./images/good4.jpg" alt=""></a>
            </div>
            <ul class="good-body w">
                <li>
                    <div class="phone-title">
                        <h5>HUAWEI P10 Plus</h5>
                        <p>金属钻雕工艺</p>
                        <div class="price">
                            ￥4388
                        </div>
                    </div>
                    <img src="./images/huawe_iphone1.png" alt="">
                </li>
                <li>
                    <div class="phone-title">
                        <h5>HUAWEI nova 青春版</h5>
                        <p>炫出我色彩</p>
                        <div class="price">
                            ￥1999
                        </div>
                    </div>
                    <img src="./images/huawei_iphone2.png" alt="">
                </li>
                <li>
                    <div class="phone-title">
                        <h5>HUAWEI Mate 9pro</h5>
                        <p>2k双曲面屏</p>
                        <div class="price">
                            ￥4699
                        </div>
                    </div>
                    <img src="./images/huawei_iphone3.png" alt="">
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <hr>
        <div class="ft-top w">
            <div class="top-item">
                <div class="item-icon"></div>
                <p>500强企业 品质保证</p>
            </div>
            <div class="top-item">
                <div class="item-icon"></div>
                <p>7天退货 15天换货</p>
            </div>
            <div class="top-item">
                <div class="item-icon"></div>
                <p>99元起免运费</p>
            </div>
            <div class="top-item">
                <div class="item-icon"></div>
                <p>448家维修网点 全国联保</p>
            </div>
        </div>
        <hr>
        <div class="ft-by w">
            <dl>
                <dd>帮助中心</dd>
                <dt><a href="#">购物指南</a></dt>
                <dt><a href="#">配送方式</a></dt>
                <dt><a href="#">支付方式</a></dt>
                <dt><a href="#">常见问题</a></dt>
                <span class="util"></span>
            </dl>
            <dl>
                <dd>售后服务</dd>
                <dt><a href="#">保修政策</a></dt>
                <dt><a href="#">退换货政策</a></dt>
                <dt><a href="#">退换货流程</a></dt>
                <dt><a href="#">保修状态查询</a></dt>
                <span class="util"></span>
            </dl>
            <dl>
                <dd>技术支持</dd>
                <dt><a href="#">售后网点</a></dt>
                <dt><a href="#">荣耀零售店铺</a></dt>
                <dt><a href="#">预约维修</a></dt>
                <dt><a href="#">手机寄修服务</a></dt>
                <dt><a href="#">维修配件价格查询</a></dt>
                <dt><a href="#">软件下载</a></dt>
                <span class="util"></span>
            </dl>
            <dl>
                <dd>关于商城</dd>
                <dt><a href="#">公司介绍</a></dt>
                <dt><a href="#">华为商城简介</a></dt>
                <dt><a href="#">联系客服</a></dt>
                <span class="util"></span>
            </dl>
            <dl>
                <dd>关注我们</dd>
                <dt><a href="#">新浪微博</a></dt>
                <dt><a href="#">腾讯微博</a></dt>
                <dt><a href="#">花粉俱乐部</a></dt>
                <dt><a href="#">商城手机版</a></dt>
                <span class="util"></span>
            </dl>
        </div>
        <hr>
        <div class="ft-bottom w">
            <p>友情链接： | 华为官网 | 华为消费者业务 | 荣耀官网 | 花粉俱乐部 | 莫塞尔商城 | 爱旅官网 | 华为应用市场 | 万表网 | 中商情报网 | 刷机精灵 | 华为手机 | 优购物官网 | 智能电视 | UC浏览器 |
            中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 | 多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 | 亿智蘑菇 | 安卓市场 |
            阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 | 移动叔叔 | 奥特莱斯 | 荣耀Magic | 携程租车 | <a href="#">申请链接
            &gt;&gt;</a></p>
            <p>隐私政策 服务协议 Copyright ? 2012-2017 VMALL.COM 版权所有 保留一切权利</p>
            <p><img src="./images/police.png" alt="">苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 | 网络文化经营许可证：苏网文[2015] 1599-026号</p>
            <div class="police">
                <img src="./images/police1.jpg" alt="">
                <img src="./images/police4.png" alt="">
                <img src="./images/police3.png" alt="">
                <img src="./images/police2.png" alt="">
            </div>
        </div>
    </div>
</body>
</html>